<template>
  <div class="adminBox">
    <el-card>
      <div class="headerTitle" style="padding: 20px">管理员输入</div>
      <div class="enterList">
        <div class="itemStyle" style="padding-top: 0">
          <div class="itemTitle">
            项目群设置
            <button class="subBtn" @click="handleProjects">提交</button>
          </div>
          <div class="radioGroup">
            <el-radio-group v-model="groupRadio">
              <el-radio :label="1">显示所有项目名称</el-radio>
              <el-radio :label="2">仅显示指定项目名称</el-radio>
            </el-radio-group>
            <div class="specificPro">
              <div>
                <div>
                  <span>添加特定项目</span>
                  <el-dropdown trigger="click" @command="addHandleCommand">
                    <span class="el-dropdown-link">
                      请选择项目<el-icon class="el-icon--right">
                        <arrow-down />
                      </el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-for="item of state.proList" :key="item.id" :command="item">{{
                            item.projectName
                        }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <div>
                  <span>移除特定项目</span>
                  <el-dropdown trigger="click" @command="delHandleCommand">
                    <span class="el-dropdown-link">
                      请选择项目<el-icon class="el-icon--right">
                        <arrow-down />
                      </el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-for="item of state.yiList" :key="item.porjectId" :command="item">{{
                            item.projectName
                        }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
              <div class="proList">
                <div v-for="item of state.yiList" :key="item.porjectId">
                  {{ item.projectName }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="itemStyle">
          <div class="itemTitle">
            项目基本信息
            <button class="subBtn" @click="handleProInfo">提交</button>
          </div>
          <div style="margin-top: 15px">
            <el-form :inline="true" class="demo-form-inline basicForm" label-position="left" label-width="90px"
              size="small" v-model="state.proInfo">
              <el-form-item class="yz" label="业主公司简称">
                <el-input placeholder="请输入" v-model="state.proInfo.CompanyName"></el-input>
              </el-form-item>
              <el-form-item class="english" label="英文简称">
                <el-input placeholder="请输入" v-model="state.proInfo.ECompanyName"></el-input>
              </el-form-item>
              <el-form-item class="sendLogo" label="公司logo">
                <el-upload action="http://oao.zhichengshangxin.com/UploadsFile" :on-success="handleUpload"
                  class="upload-demo" v-model="state.proInfo.Logo" auto-upload>
                  <div class="iconfont icon-yunshangchuan_o">上传</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="logo">
                <img :src="`http://oao.zhichengshangxin.com/${state.proInfo.Logo}`" alt="" />
              </el-form-item>
              <el-form-item class="sketch" label="中央空调及其楼宇自控简述">
                <el-input placeholder="请输入" type="textarea" v-model="state.proInfo.Describe"></el-input>
              </el-form-item>
              <div class="footInpForm">
                <el-form-item class="oaoSystem" label="OAO系统开始运作日期">
                  <el-date-picker :disabled-date="disabledDate" v-model="state.proInfo.StartTime" type="date"
                    placeholder="请选择开始日期" />
                </el-form-item>
                <el-form-item class="oaoCost" label="OAO系统投入成本">
                  <el-input placeholder="请输入" v-model="state.proInfo.cost"></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>

        <div class="energy">
          <div class="itemTitle">
            项目基本信息
            <button class="subBtn" @click="handleEnergy">提交</button>
          </div>

          <div class="monitor">
            <div class="energyTitle">OAO监管前建筑能耗</div>
            <div class="right">
              <div class="last">
                <div class="OAOTitle1">2019年</div>
                <div></div>
                <div class="inputNum">
                  <div>
                    电<input placeholder="请输入" v-model="state.LastYear.electric" @blur="eleChange" />kWh
                  </div>
                  <div class="gas">
                    天然气<input placeholder="请输入" v-model="state.LastYear.gas" />m³
                  </div>
                  <div>
                    市政热水<input placeholder="请输入" v-model="state.LastYear.water" />kWh
                  </div>
                </div>
              </div>
              <div class="beforeLast">
                <div class="OAOTitle1">2020年</div>
                <div class="inputNum">
                  <div>
                    电<input placeholder="请输入" v-model="state.LastsYear.electric" @blur="eleChange" />kWh
                  </div>
                  <div class="gas">
                    天然气<input placeholder="请输入" v-model="state.LastsYear.gas" />m³
                  </div>
                  <div>
                    市政热水<input placeholder="请输入" v-model="state.LastsYear.water" />kWh
                  </div>
                </div>
              </div>
              <div class="enterlast">
                <div class="OAOTitle1">2021年</div>
                <div></div>
                <div class="inputNum">
                  <div>
                    电<input placeholder="请输入" v-model="state.LastssYear.electric" @blur="eleChange" />kWh
                  </div>
                  <div class="gas">
                    天然气<input placeholder="请输入" v-model="state.LastssYear.gas" />m³
                  </div>
                  <div>
                    市政热水<input placeholder="请输入" v-model="state.LastssYear.water" />kWh
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="budget publicOAO">
            <div class="energyTitle">机房能耗预算（月）</div>
            <ProjectForm :tableData="state.tableData"></ProjectForm>
          </div>

          <div class="lastYear publicOAO">
            <div class="energyTitle">2021年机房能耗（月）</div>
            <ProjectForm :tableData="state.tableData2"></ProjectForm>
          </div>

          <div class="beforeLastYear publicOAO">
            <div class="energyTitle">2022年机房能耗（月）</div>
            <ProjectForm :tableData="state.tableData3"></ProjectForm>
          </div>
        </div>

        <div class="report">
          <div class="itemTitle">
            分析报告输入
            <button class="subBtn" @click="strategyBtn">提交</button>
          </div>
          <div class="reportInput">
            <div>
              <div>现场勘查问题</div>
              <div>
                <el-input v-model="state.ReportSub.scene" placeholder="请输入" type="textarea"></el-input>
              </div>
            </div>
            <div>
              <div>主要措施</div>
              <div>
                <el-input v-model="state.ReportSub.measures" placeholder="请输入" type="textarea"></el-input>
              </div>
            </div>
            <div>
              <div>租户/客户舒适度投诉</div>
              <div>
                <el-input v-model="state.ReportSub.complaint" placeholder="请输入" type="textarea"></el-input>
              </div>
            </div>
            <div>
              <div>舒适度投诉分析</div>
              <div>
                <el-input v-model="state.ReportSub.analysis" placeholder="请输入" type="textarea"></el-input>
              </div>
            </div>
            <div>
              <div>提升舒适度策略</div>
              <div>
                <el-input v-model="state.ReportSub.strategy" placeholder="请输入" type="textarea"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card>
      <div style="padding: 20px"></div>
      <div class="cardRight">
        <div class="relevant">
          <div class="itemTitle">
            能源相关
            <button class="subBtn" @click="RelatedSubBtn">提交</button>
          </div>
          <div class="energyItem">
            <div>单位能耗标准</div>
            <div>
              合理值<input placeholder="请输入" v-model="RelatedSub.related.rational" @blur="relatChange" />kWh/m²y
            </div>
            <div>
              先进值<input placeholder="请输入" v-model="RelatedSub.related.advanced" @blur="relatChange" />kWh/m²y
            </div>
            <div>
              类似建筑<input placeholder="请输入" v-model="RelatedSub.related.build" @blur="relatChange" />kWh/m²y
            </div>
            <!-- <div>绿电价格<span>RMB</span><input placeholder="请输入"
								v-model="RelatedSub.related.electricity" />/kWh</div>
						<div>绿证价格<span>RMB</span><input placeholder="请输入" v-model="RelatedSub.related.card" />/kWh</div>
						<div>CCER价格<span>RMB</span><input placeholder="请输入" v-model="RelatedSub.related.ccer" />/tCO₂
						</div> -->
          </div>
          <div class="energyItem1">
            <div>
              绿电价格<span>RMB</span><input placeholder="请输入" v-model="RelatedSub.related.electricity" />/kWh
            </div>
            <div>
              绿证价格<span>RMB</span><input placeholder="请输入" v-model="RelatedSub.related.card" />/kWh
            </div>
            <div>
              CCER价格<span>RMB</span><input placeholder="请输入" v-model="RelatedSub.related.ccer" />/tCO₂
            </div>
          </div>
        </div>

        <div class="company">
          <div class="itemTitle">
            <div>
              单位转换
              <span>
                *吨标煤 kgce
                <!-- tce -->
              </span>
            </div>
            <button class="subBtn" @click="UnitSubBtn">提交</button>
          </div>

          <div class="companyItem">
            <div>
              <div>
                电<span>1kWh=<input v-model="UnitSub.unit.electric_kgco" placeholder="请输入" /></span>kgCO₂
              </div>
              <div>
                电<span>1kWh=<input v-model="UnitSub.unit.electric_tce" placeholder="请输入" /></span>
                <!-- tce -->
                kgce
              </div>
            </div>
            <div>
              <div>
                天然气<span>1m3=<input v-model="UnitSub.unit.gas_kgco" placeholder="请输入" /></span>kgCO₂
              </div>
              <div>
                天然气<span>1m3=<input v-model="UnitSub.unit.gas_tce" placeholder="请输入" /></span>
                <!-- tce -->
                kgce
              </div>
            </div>
            <div>
              <div>
                市政热水<span>1kWh=<input v-model="UnitSub.unit.card" placeholder="请输入" /></span>kgCO₂
              </div>
              <div>
                市政热水<span>1kWh=<input v-model="UnitSub.unit.ccer" placeholder="请输入" /></span>
                <!-- tce -->
                kgce
              </div>
            </div>
          </div>
        </div>

        <div class="comfort">
          <div class="itemTitle">
            舒适度相关
            <button class="subBtn" @click="comfortBtn">提交</button>
          </div>
          <div class="temperature">
            <div>
              <div class="temperTitle">夏季舒适温度范围</div>
              <div>
                <input v-model="comfort.cosy.summer_min" placeholder="最低温度" type="text" />
                <span>—</span>
                <input v-model="comfort.cosy.summer_max" placeholder="最高温度" type="text" />
              </div>
            </div>
            <div>
              <div class="temperTitle">冬季舒适温度范围</div>
              <div>
                <input v-model="comfort.cosy.winter_min" placeholder="最低温度" type="text" />
                <span>—</span>
                <input v-model="comfort.cosy.winter_max" placeholder="最高温度" type="text" />
              </div>
            </div>
          </div>
        </div>

        <div class="economics">
          <div class="itemTitle">
            经济性相关
            <button class="subBtn" @click="EconomySubBtn">提交</button>
          </div>

          <div class="rate">
            <div>本地资本化率</div>
            <div>
              <el-input v-model="EconomySub.economy.capital" placeholder="请输入" size="small"></el-input>
            </div>
          </div>
        </div>

        <div class="ESG">
          <div class="itemTitle">
            ESG相关
            <button class="subBtn" @click="ESGBtn">提交</button>
          </div>

          <div>
            <div class="ESGinput">
              <div class="ESGTitle">可选条目输入</div>
              <div>
                <el-input v-model="ESG.esg.entry[0]" placeholder="请输入" size="small"></el-input>
                <el-input v-model="ESG.esg.entry[1]" placeholder="请输入" size="small"></el-input>
                <el-input v-model="ESG.esg.entry[2]" placeholder="请输入" size="small"></el-input>
              </div>
            </div>

            <div class="ESGinput">
              <div class="ESGTitle">对应条件：节能率</div>
              <div>
                <el-input v-model="ESG.esg.factor[0]" placeholder="请输入" size="small"></el-input>
                <el-input v-model="ESG.esg.factor[1]" placeholder="请输入" size="small"></el-input>
                <el-input v-model="ESG.esg.factor[2]" placeholder="请输入" size="small"></el-input>
              </div>
            </div>

            <div class="ESGinput">
              <div class="ESGTitle">对应得分</div>
              <div>
                <el-input v-model="ESG.esg.score[0]" placeholder="请输入" size="small"></el-input>
                <el-input v-model="ESG.esg.score[1]" placeholder="请输入" size="small"></el-input>
                <el-input v-model="ESG.esg.score[2]" placeholder="请输入" size="small"></el-input>
              </div>
            </div>
          </div>
        </div>

        <div class="keyEquip">
          <div class="itemTitle">
            关键设备
            <button class="subBtn" @click="keyDataListBtn">提交</button>
          </div>
          <div class="keyTable">
            <el-table :cell-style="{ textAlign: 'center' }" :data="keyDataList.facility"
              :header-cell-style="{ textAlign: 'center' }" border size="small">
              <el-table-column label="序号" type="index"> </el-table-column>
              <el-table-column label="设备名称" prop="name">
                <template #default="scope">
                  <input type="text" v-model="scope.row.name" />
                </template>
              </el-table-column>
              <el-table-column label="设备编码" prop="number">
                <template #default="scope">
                  <input type="text" v-model="scope.row.number" />
                </template>
              </el-table-column>
              <el-table-column label="检验时间" prop="time">
                <template #default="scope">
                  <input type="text" v-model="scope.row.time" />
                </template>
              </el-table-column>
              <el-table-column label="检查人" prop="people">
                <template #default="scope">
                  <input type="text" v-model="scope.row.people" />
                </template>
              </el-table-column>
              <el-table-column label="检查人手机" prop="tel">
                <template #default="scope">
                  <input type="text" v-model="scope.row.tel" />
                </template>
              </el-table-column>
              <el-table-column label="设备说明书" prop="explain">
                <template #default="scope">
                  <input type="text" v-model="scope.row.explain" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, toRaw } from "vue";
import ProjectForm from "./projectForm.vue";
import { ProjectList, AdminInputs, IstratorInput, } from "@/api/model/admins";
import dayjs from "dayjs";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
const store = useStore();
// 项目设置群单选绑定
let groupRadio = ref("");

// 关键设备数据
let keyDataList = reactive({
  facility: [
    {
      id: "1",
      name: "",
      time: "",
      number: "",
      people: "",
      tel: "",
      explain: "",
    },
    {
      id: "2",
      name: "",
      time: "",
      number: "",
      people: "",
      tel: "",
      explain: "",
    },
    {
      id: "3",
      name: "",
      time: "",
      number: "",
      people: "",
      tel: "",
      explain: "",
    },
  ],
});

// 能源相关
let RelatedSub = reactive({
  related: {
    rational: "", // 合理值
    advanced: "", // 先进值
    build: "", // 类似建筑
    electricity: "", // 绿电价格
    card: "", // 绿证价格
    ccer: "", // CCER价格
  },
});

const state = reactive({
  // 添加项目列表
  proList: [],
  // 移除项目列表
  yiList: [],
  // 项目基本信息
  proInfo: {},

  // 上传后返回的数据
  datas: "",

  // 大前年年能源碳
  LastYear: {
    electric: "",
  },

  // 前年能源碳
  LastsYear: {
    electric: "",
  },
  // 去年能源碳
  LastssYear: {
    electric: "",
  },

  // 表一
  tableData: [
    {
      name: "电kWh",
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
    {
      name: "天然气m³",
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
    {
      name: "市政热水kWh",
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
  ],

  // 表二
  tableData2: [
    {
      name: "电kWh",
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
    {
      name: "天然气m³",
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
    {
      name: "市政热水kWh",
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
  ],

  // 表三
  tableData3: [
    {
      name: "电kWh",
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
    {
      name: "天然气m³",
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
    {
      name: "市政热水kWh",
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
  ],

  // 分析报告
  ReportSub: {},
});
//右侧合理值、先进值、类似建筑的数据变化
const relatChange = () => {
  let rel1 = RelatedSub.related.rational;
  let rel2 = RelatedSub.related.advanced;
  let rel3 = RelatedSub.related.build;
  let list = [];
  if (rel1 & rel2 & rel3) {
    list.push(rel1);
    list.push(rel2);
    list.push(rel3);
    localStorage.setItem("relalist", JSON.stringify(list));
  }
};
//输入2019/2020/2021年电量变化时的事件
const eleChange = () => {
  let list = [];
  let ele1 = state.LastYear.electric;
  let ele2 = state.LastsYear.electric;
  let ele3 = state.LastssYear.electric;
  if (ele1 && ele2 & ele3) {
    list.push(ele1);
    list.push(ele3);
    list.push(ele2);
    localStorage.setItem("elelist", JSON.stringify(list));
  }
};
// 单位转换
let UnitSub = reactive({
  unit: {
    electric_kgco: "",
    electric_tce: "",
    gas_kgco: "",
    gas_tce: "",
    card: "",
    ccer: "",
  },
});

// 舒适度相关
let comfort = reactive({
  cosy: {
    summer_min: "",
    summer_max: "",
    winter_min: "",
    winter_max: "",
  },
});
// 经济性相关数据
let EconomySub = reactive({
  economy: { capital: "" },
});

// ESG输入内容
let ESG = reactive({
  esg: {
    entry: [],
    factor: [],
    score: [],
  },
});

const delHandleCommand = function (item) {
  let index = state.yiList.indexOf(item);
  if (state.proList.findIndex((i) => i.projectId === item.projectId) < 0) {
    state.proList.push(item);
  }

  index !== -1 && state.yiList.splice(index, 1);
};
// 关键设备按钮
let keyDataListBtn = async () => {
  let { data } = await IstratorInput({ id: 1, facility: JSON.stringify(keyDataList.facility) });
  if (data.code === 200) ElMessage.success(data.message);
  // await clears();
};
// 能源相关按钮
let RelatedSubBtn = async () => {
  let { data } = await IstratorInput({ id: 1, related: JSON.stringify(RelatedSub.related) });
  if (data.code === 200) ElMessage.success(data.message);
  // await clears();
};
//  单位转换按钮
let UnitSubBtn = async () => {
  let { data } = await IstratorInput({ id: 1, unit: JSON.stringify(UnitSub.unit) });
  if (data.code === 200) ElMessage.success(data.message);
  // await clears();
};

// 舒适度相关
let comfortBtn = async () => {
  let { data } = await IstratorInput({ id: 1, cosy: JSON.stringify(comfort.cosy) });
  if (data.code === 200) ElMessage.success(data.message);
  // await clears();
};
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
// 经济性相关按钮
let EconomySubBtn = async () => {
  let { data } = await IstratorInput({ id: 1, economy: JSON.stringify(EconomySub.economy) });
  if (data.code === 200) ElMessage.success(data.message);
  // await clears();
};
// ESG按钮
const ESGBtn = async () => {
  let { data } = await IstratorInput({ id: 1, esg: JSON.stringify(ESG.esg) });
  if (data.code === 200) ElMessage.success(data.message);
};

// 清除分析报告
// const clears = () => {
// 	state.ReportSub.scene = "";
// 	state.ReportSub.measures = "";
// 	state.ReportSub.complaint = "";
// 	state.ReportSub.analysis = "";
// 	state.ReportSub.strategy = "";
// 	EconomySub.economy.capital = "";
// 	comfort.cosy = {
// 		summer_min: "",
// 		summer_max: "",
// 		winter_min: "",
// 		winter_max: "",
// 		// 获取项目列表
// 	};
// 	UnitSub.unit = {
// 		electric_kgco: "",
// 		electric_tce: "",
// 		gas_kgco: "",
// 		gas_tce: "",
// 		card: "",
// 		ccer: "",
// 	};
// 	RelatedSub.related = {
// 		rational: "",
// 		advanced: "",
// 		build: "",
// 		electricity: "",
// 		card: "",
// 		ccer: "",
// 	};
// 	keyDataList.facility = [
// 		{
// 			id: "1",
// 			name: "",
// 			time: "",
// 			number: "",
// 			people: "",
// 			tel: "",
// 			explain: "",
// 		},
// 		{
// 			id: "2",
// 			name: "",
// 			time: "",
// 			number: "",
// 			people: "",
// 			tel: "",
// 			explain: "",
// 		},
// 		{
// 			id: "3",
// 			name: "",
// 			time: "",
// 			number: "",
// 			people: "",
// 			tel: "",
// 			explain: "",
// 		},
// 	];
// };


// 提交分析报告输入按钮
let strategyBtn = async () => {
  let { data } = await IstratorInput({ id: 1, report: JSON.stringify(state.ReportSub) });
  console.log("提交分析报告输入按钮", data);
  if (data.code === 200) ElMessage.success(data.message);
  // await clears();
};

const addHandleCommand = function (item) {
  item = toRaw(item);
  console.log(state.yiList, "ss");
  if (Array.from(state.yiList).find((i) => i.projectId === item.projectId)) {
    console.log(2);
    return state.yiList;
  } else {
    console.log(1);
    state.yiList.push(item);
    let ind = state.proList.findIndex(
      (items) => items.projectId == item.projectId
    );
    state.proList.splice(ind, 1);
  }
};

onMounted(() => {
  getProjectList();
  getHui();
  eleChange();
  relatChange();
});
//监听数据变化保存到本地
/*
watch(
  state.tableData[0],
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
    localStorage.setItem("electric", JSON.stringify(newValue));
  },
  { deep: true, immediate: true }
);

watch(
  state.tableData2[0],
  (newValue2, oldValue2) => {
    console.log(newValue2, oldValue2);
    localStorage.setItem("electric2", JSON.stringify(newValue2));
  },
  { deep: true, immediate: true }
);

watch(
  state.tableData3[0],
  (newValue3, oldValue3) => {
    console.log(oldValue3);
    localStorage.setItem("electric3", JSON.stringify(newValue3));
  },
  { deep: true, immediate: true }
);
*/

// 获取项目信息
const getHui = async () => {
  let { data: res } = await AdminInputs({ id: 1 });
  let info = res.data.list[0]
  console.log(info, "As");
  state.proInfo = JSON.parse(info.info);
  //这几个数据的来源是从本地通过JSON解析从后端获取到的数据，但现在改成从前端输入，暂时保留，不做删除
  state.LastYear = JSON.parse(info.energy).LastYear;
  state.LastsYear = JSON.parse(info.energy).LastsYear;
  state.LastssYear = JSON.parse(info.energy).LastssYear;
  state.tableData = JSON.parse(info.energy).table1;
  state.tableData2 = JSON.parse(info.energy).table2;
  state.tableData3 = JSON.parse(info.energy).table3;
  // console.log('机房能源',state.tableData2);
  state.ReportSub = JSON.parse(info.report);
  // RelatedSub.related = JSON.parse(res.data.related);
  UnitSub.unit = JSON.parse(info.unit);
  comfort.cosy = JSON.parse(info.cosy);
  EconomySub.economy = JSON.parse(info.economy);
  ESG.esg = JSON.parse(info.esg);
  keyDataList.facility = JSON.parse(info.facility);
  RelatedSub.related = JSON.parse(info.related);
  groupRadio.value = JSON.parse(info.groupss)?.ShowProject || ""
  state.yiList = JSON.parse(info.groupss)?.Project || [];
  console.log("groupRadio", JSON.parse(info.groupss)?.ShowProject);
};

// 获取项目列表
const getProjectList = async () => {
  let { data: res } = await ProjectList();
  if (res.code == 200) {
    state.proList = res.data.list;
    console.log(res.data.list, '项目列表');
  }
};
// let addlist=reactive(
//   {
//     groupss:null,
//     info:null,
//     energy:null,
//     report:null,
//     related:null,
//     unit:null,
//     cosy:null,
//     economy:null,
//     esg:null,
//     facility:null
//   }
// )
// 提交项目群设置
const handleProjects = async () => {
  let cc = [];
  state.yiList.forEach((item) => {
    cc.push({
      projectId: item.projectId,
      projectName: item.projectName,
    });
  });
  let { data } = await IstratorInput({
    id: 1,
    groupss: JSON.stringify({ ShowProject: groupRadio.value, Project: cc }),
  });
  if (data.code === 200) ElMessage.success(data.message);
};

// 上传项目的基本信息
const handleProInfo = async () => {
  state.proInfo.StartTime = dayjs(state.proInfo.StartTime).format("YYYY-MM-DD");
  sessionStorage.setItem("pimg", state.proInfo.Logo);
  sessionStorage.setItem("pname", state.proInfo.CompanyName);
  sessionStorage.setItem("epname", state.proInfo.ECompanyName);
  store.commit("setProject", {
    projectImg: state.proInfo.Logo,
    projectName: state.proInfo.CompanyName,
    enProjectName: state.proInfo.ECompanyName,
  });
  console.log(state.proInfo, "proInfo");
  let { data } = await IstratorInput({ id: 1, info: JSON.stringify(state.proInfo) });
  if (data.code === 200) ElMessage.success(data.message);
};

// 上传文件
const handleUpload = async (e) => {
  if (e.status == 200) {
    state.proInfo.Logo = e.date.url;
  }
};

// 能源碳
const handleEnergy = async () => {
  const kgce = UnitSub.unit.electric_tce;
  const kgCO2 = UnitSub.unit.electric_kgco;
  const electricdata = [
    {
      name: "kwh",
      value: [
        state.tableData["0"]["one"],
        state.tableData["0"]["two"],
        state.tableData["0"]["three"],
        state.tableData["0"]["four"],
        state.tableData["0"]["five"],
        state.tableData["0"]["six"],
        state.tableData["0"]["seven"],
        state.tableData["0"]["eight"],
        state.tableData["0"]["nine"],
        state.tableData["0"]["ten"],
        state.tableData["0"]["eleven"],
        state.tableData["0"]["twelve"],
      ],
    },
    {
      name: "rmb",
      value: [
        (state.tableData["0"]["one"] * 0.79).toFixed(2),
        (state.tableData["0"]["two"] * 0.79).toFixed(2),
        (state.tableData["0"]["three"] * 0.79).toFixed(2),
        (state.tableData["0"]["four"] * 0.79).toFixed(2),
        (state.tableData["0"]["five"] * 0.79).toFixed(2),
        (state.tableData["0"]["six"] * 0.79).toFixed(2),
        (state.tableData["0"]["seven"] * 0.79).toFixed(2),
        (state.tableData["0"]["eight"] * 0.79).toFixed(2),
        (state.tableData["0"]["nine"] * 0.79).toFixed(2),
        (state.tableData["0"]["ten"] * 0.79).toFixed(2),
        (state.tableData["0"]["eleven"] * 0.79).toFixed(2),
        (state.tableData["0"]["twelve"] * 0.79).toFixed(2),
      ],
    },
    {
      name: "kgce",
      value: [
        (state.tableData["0"]["one"] * kgce).toFixed(2),
        (state.tableData["0"]["two"] * kgce).toFixed(2),
        (state.tableData["0"]["three"] * kgce).toFixed(2),
        (state.tableData["0"]["four"] * kgce).toFixed(2),
        (state.tableData["0"]["five"] * kgce).toFixed(2),
        (state.tableData["0"]["six"] * kgce).toFixed(2),
        (state.tableData["0"]["seven"] * kgce).toFixed(2),
        (state.tableData["0"]["eight"] * kgce).toFixed(2),
        (state.tableData["0"]["nine"] * kgce).toFixed(2),
        (state.tableData["0"]["ten"] * kgce).toFixed(2),
        (state.tableData["0"]["eleven"] * kgce).toFixed(2),
        (state.tableData["0"]["twelve"] * kgce).toFixed(2),
      ],
    },
    {
      name: "kgCO2",
      value: [
        (state.tableData["0"]["one"] * kgCO2).toFixed(2),
        (state.tableData["0"]["two"] * kgCO2).toFixed(2),
        (state.tableData["0"]["three"] * kgCO2).toFixed(2),
        (state.tableData["0"]["four"] * kgCO2).toFixed(2),
        (state.tableData["0"]["five"] * kgCO2).toFixed(2),
        (state.tableData["0"]["six"] * kgCO2).toFixed(2),
        (state.tableData["0"]["seven"] * kgCO2).toFixed(2),
        (state.tableData["0"]["eight"] * kgCO2).toFixed(2),
        (state.tableData["0"]["nine"] * kgCO2).toFixed(2),
        (state.tableData["0"]["ten"] * kgCO2).toFixed(2),
        (state.tableData["0"]["eleven"] * kgCO2).toFixed(2),
        (state.tableData["0"]["twelve"] * kgCO2).toFixed(2),
      ],
    },
  ];
  const electricdata2 = [
    {
      name: "kwh",
      value: [
        state.tableData2["0"]["one"],
        state.tableData2["0"]["two"],
        state.tableData2["0"]["three"],
        state.tableData2["0"]["four"],
        state.tableData2["0"]["five"],
        state.tableData2["0"]["six"],
        state.tableData2["0"]["seven"],
        state.tableData2["0"]["eight"],
        state.tableData2["0"]["nine"],
        state.tableData2["0"]["ten"],
        state.tableData2["0"]["eleven"],
        state.tableData2["0"]["twelve"],
      ],
    },
    {
      name: "rmb",
      value: [
        (state.tableData2["0"]["one"] * 0.79).toFixed(2),
        (state.tableData2["0"]["two"] * 0.79).toFixed(2),
        (state.tableData2["0"]["three"] * 0.79).toFixed(2),
        (state.tableData2["0"]["four"] * 0.79).toFixed(2),
        (state.tableData2["0"]["five"] * 0.79).toFixed(2),
        (state.tableData2["0"]["six"] * 0.79).toFixed(2),
        (state.tableData2["0"]["seven"] * 0.79).toFixed(2),
        (state.tableData2["0"]["eight"] * 0.79).toFixed(2),
        (state.tableData2["0"]["nine"] * 0.79).toFixed(2),
        (state.tableData2["0"]["ten"] * 0.79).toFixed(2),
        (state.tableData2["0"]["eleven"] * 0.79).toFixed(2),
        (state.tableData2["0"]["twelve"] * 0.79).toFixed(2),
      ],
    },
    {
      name: "kgce",
      value: [
        (state.tableData2["0"]["one"] * kgce).toFixed(2),
        (state.tableData2["0"]["two"] * kgce).toFixed(2),
        (state.tableData2["0"]["three"] * kgce).toFixed(2),
        (state.tableData2["0"]["four"] * kgce).toFixed(2),
        (state.tableData2["0"]["five"] * kgce).toFixed(2),
        (state.tableData2["0"]["six"] * kgce).toFixed(2),
        (state.tableData2["0"]["seven"] * kgce).toFixed(2),
        (state.tableData2["0"]["eight"] * kgce).toFixed(2),
        (state.tableData2["0"]["nine"] * kgce).toFixed(2),
        (state.tableData2["0"]["ten"] * kgce).toFixed(2),
        (state.tableData2["0"]["eleven"] * kgce).toFixed(2),
        (state.tableData2["0"]["twelve"] * kgce).toFixed(2),
      ],
    },
    {
      name: "kgCO2",
      value: [
        (state.tableData2["0"]["one"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["two"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["three"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["four"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["five"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["six"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["seven"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["eight"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["nine"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["ten"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["eleven"] * kgCO2).toFixed(2),
        (state.tableData2["0"]["twelve"] * kgCO2).toFixed(2),
      ],
    },
  ];
  const electricdata3 = [
    {
      name: "kwh",
      value: [
        state.tableData3["0"]["one"],
        state.tableData3["0"]["two"],
        state.tableData3["0"]["three"],
        state.tableData3["0"]["four"],
        state.tableData3["0"]["five"],
        state.tableData3["0"]["six"],
        state.tableData3["0"]["seven"],
        state.tableData3["0"]["eight"],
        state.tableData3["0"]["nine"],
        state.tableData3["0"]["ten"],
        state.tableData3["0"]["eleven"],
        state.tableData3["0"]["twelve"],
      ],
    },
    {
      name: "rmb",
      value: [
        (state.tableData3["0"]["one"] * 0.79).toFixed(2),
        (state.tableData3["0"]["two"] * 0.79).toFixed(2),
        (state.tableData3["0"]["three"] * 0.79).toFixed(2),
        (state.tableData3["0"]["four"] * 0.79).toFixed(2),
        (state.tableData3["0"]["five"] * 0.79).toFixed(2),
        (state.tableData3["0"]["six"] * 0.79).toFixed(2),
        (state.tableData3["0"]["seven"] * 0.79).toFixed(2),
        (state.tableData3["0"]["eight"] * 0.79).toFixed(2),
        (state.tableData3["0"]["nine"] * 0.79).toFixed(2),
        (state.tableData3["0"]["ten"] * 0.79).toFixed(2),
        (state.tableData3["0"]["eleven"] * 0.79).toFixed(2),
        (state.tableData3["0"]["twelve"] * 0.79).toFixed(2),
      ],
    },
    {
      name: "kgce",
      value: [
        (state.tableData3["0"]["one"] * kgce).toFixed(2),
        (state.tableData3["0"]["two"] * kgce).toFixed(2),
        (state.tableData3["0"]["three"] * kgce).toFixed(2),
        (state.tableData3["0"]["four"] * kgce).toFixed(2),
        (state.tableData3["0"]["five"] * kgce).toFixed(2),
        (state.tableData3["0"]["six"] * kgce).toFixed(2),
        (state.tableData3["0"]["seven"] * kgce).toFixed(2),
        (state.tableData3["0"]["eight"] * kgce).toFixed(2),
        (state.tableData3["0"]["nine"] * kgce).toFixed(2),
        (state.tableData3["0"]["ten"] * kgce).toFixed(2),
        (state.tableData3["0"]["eleven"] * kgce).toFixed(2),
        (state.tableData3["0"]["twelve"] * kgce).toFixed(2),
      ],
    },
    {
      name: "kgCO2",
      value: [
        (state.tableData3["0"]["one"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["two"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["three"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["four"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["five"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["six"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["seven"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["eight"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["nine"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["ten"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["eleven"] * kgCO2).toFixed(2),
        (state.tableData3["0"]["twelve"] * kgCO2).toFixed(2),
      ],
    },
  ];
  localStorage.setItem("electric", JSON.stringify(electricdata));
  localStorage.setItem("electric2", JSON.stringify(electricdata2));
  localStorage.setItem("electric3", JSON.stringify(electricdata3));
  let { data } = await IstratorInput({
    id: 1,
    energy: JSON.stringify({
      LastYear: state.LastYear,
      LastsYear: state.LastsYear,
      LastssYear: state.LastssYear,
      table1: state.tableData,
      table2: state.tableData2,
      table3: state.tableData3,
    }),
  });
  if (data.code === 200) ElMessage.success(data.message);
  console.log(data);
  // console.log("dian", res);
  // if (res.status == 200) {
  // state.LastYear = {};
  // (state.LastsYear = {}),
  // state.tableData = [
  // 	{
  // 		name: "电kWh",
  // 		one: "",
  // 		two: "",
  // 		three: "",
  // 		four: "",
  // 		five: "",
  // 		six: "",
  // 		seven: "",
  // 		eight: "",
  // 		nine: "",
  // 		ten: "",
  // 		eleven: "",
  // 		twelve: "",
  // 	},
  // 	{
  // 		name: "天然气m³",
  // 		one: "",
  // 		two: "",
  // 		three: "",
  // 		four: "",
  // 		five: "",
  // 		six: "",
  // 		seven: "",
  // 		eight: "",
  // 		nine: "",
  // 		ten: "",
  // 		eleven: "",
  // 		twelve: "",
  // 	},
  // 	{
  // 		name: "市政热水kWh",
  // 		one: "",
  // 		two: "",
  // 		three: "",
  // 		four: "",
  // 		five: "",
  // 		six: "",
  // 		seven: "",
  // 		eight: "",
  // 		nine: "",
  // 		ten: "",
  // 		eleven: "",
  // 		twelve: "",
  // 	},
  // ];
  // state.tableData2 = [
  // 	{
  // 		name: "电kWh",
  // 		one: "",
  // 		two: "",
  // 		three: "",
  // 		four: "",
  // 		five: "",
  // 		six: "",
  // 		seven: "",
  // 		eight: "",
  // 		nine: "",
  // 		ten: "",
  // 		eleven: "",
  // 		twelve: "",
  // 	},
  // 	{
  // 		name: "天然气m³",
  // 		one: "",
  // 		two: "",
  // 		three: "",
  // 		four: "",
  // 		five: "",
  // 		six: "",
  // 		seven: "",
  // 		eight: "",
  // 		nine: "",
  // 		ten: "",
  // 		eleven: "",
  // 		twelve: "",
  // 	},
  // 	{
  // 		name: "市政热水kWh",
  // 		one: "",
  // 		two: "",
  // 		three: "",
  // 		four: "",
  // 		five: "",
  // 		six: "",
  // 		seven: "",
  // 		eight: "",
  // 		nine: "",
  // 		ten: "",
  // 		eleven: "",
  // 		twelve: "",
  // 	},
  // ];
  // state.tableData3 = [
  // 	{
  // 		name: "电kWh",
  // 		one: "",
  // 		two: "",
  // 		three: "",
  // 		four: "",
  // 		five: "",
  // 		six: "",
  // 		seven: "",
  // 		eight: "",
  // 		nine: "",
  // 		ten: "",
  // 		eleven: "",
  // 		twelve: "",
  // 	},
  // 	{
  // 		name: "天然气m³",
  // 		one: "",
  // 		two: "",
  // 		three: "",
  // 		four: "",
  // 		five: "",
  // 		six: "",
  // 		seven: "",
  // 		eight: "",
  // 		nine: "",
  // 		ten: "",
  // 		eleven: "",
  // 		twelve: "",
  // 	},
  // 	{
  // 		name: "市政热水kWh",
  // 		one: "",
  // 		two: "",
  // 		three: "",
  // 		four: "",
  // 		five: "",
  // 		six: "",
  // 		seven: "",
  // 		eight: "",
  // 		nine: "",
  // 		ten: "",
  // 		eleven: "",
  // 		twelve: "",
  // 	},
  // ];
  // }
};
</script>

<style lang="less" scoped>
.keyTable {
  input {
    width: 7vw;
    line-height: 1.5vw;
    text-align: center;
    border: 0px;
  }
}

:deep(.el-card__body) {
  padding: 0;
}

.itemTitle {
  color: #646363;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .subBtn {
    width: 95px;
    padding: 4px 0;
    border-radius: 4px;
    color: #fff;
    background: #8faadc;
    border: 1px solid #8faadc;
  }

  span {
    font-size: 12px;
    margin-left: 20px;
  }
}

.adminBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  column-gap: 5px;
}

.enterList {
  padding: 20px 20px;

  .itemStyle {
    border-bottom: 1px dashed #a8a7a7;
    padding: 20px 0 10px;
  }

  .radioGroup {
    margin-top: 10px;
  }

  .el-radio-group {
    flex-direction: column;
    align-items: flex-start;

    .el-radio {
      flex-direction: row-reverse;
      width: 200px;
      margin: 0 !important;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .el-radio__input {
        margin-left: 10px;
      }

      .el-radio__label {
        padding: 0 !important;
      }
    }
  }

  .specificPro {
    display: flex;
    margin-top: 10px;
    justify-content: flex-end;

    &>div:first-child {
      height: 96px;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      div {
        span {
          margin-right: 10px;
          font-size: 15px;
          color: #646363;
        }

        .el-dropdown {
          border: 1px solid #eee;
          padding: 3px 8px;
          border-radius: 4px;

          .el-dropdown-link {
            color: #cccccc;
            font-size: 13px;
          }

          i {
            margin: 0 5px;
          }
        }
      }
    }

    .proList {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      height: 80px;
      border: 1px solid #e7e7e7;
      border-radius: 4px;
      padding: 5px;

      div {
        padding: 0 5px;
        font-size: 13px;
      }
    }
  }
}

.basicForm {
  :deep(.el-form-item__label) {
    font-size: 13px !important;
  }

  :deep(.el-form-item__content) {
    width: 190px;
  }

  .sendLogo {
    width: 100%;
    margin-right: 0 !important;

    .el-upload {
      div {
        font-size: 15px;
        color: #4d62a5;
        display: flex;
      }

      .icon-yunshangchuan_o:before {
        font-size: 22px;
      }
    }
  }

  .yz {
    margin-right: 78px !important;
  }

  .english {
    margin-right: 0;
  }

  .sketch {
    width: 100%;
    margin-right: 0 !important;

    :deep(.el-form-item__label) {
      width: 175px !important;
    }

    :deep(.el-textarea__inner) {
      resize: none;
    }
  }

  .footInpForm {
    display: flex;
    justify-content: space-between;
  }

  .oaoSystem {
    margin-right: 0 !important;

    :deep(.el-form-item__label) {
      width: 172px !important;
    }

    :deep(.el-form-item__content) {
      width: 145px;
    }
  }

  .oaoCost {
    margin-right: 0 !important;

    :deep(.el-form-item__label) {
      width: 130px !important;
    }

    :deep(.el-form-item__content) {
      width: 145px;
    }
  }
}

.energy {
  border-bottom: 1px dashed #a8a7a7;
  padding: 20px 0;

  .energyTitle {
    width: 15%;
    font-size: 14px;
  }

  .monitor {
    margin-top: 15px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;

    .right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 75%;

      input {
        width: 50px;
        border: 1px solid #d8d8d8;
        padding: 1px 3px;
        border-radius: 4px;
        margin: 0 5px;
      }

      &>div {
        display: flex;
        margin-bottom: 15px;
        width: 100%;
        justify-content: space-between;
      }

      .OAOTitle1 {
        margin-right: 11px;
      }
    }
  }

  .inputNum {
    display: flex;
    margin-right: 30px;
    font-size: 13px;

    div {
      margin-left: 50px;
    }

    >div:first-child {
      input:first-child {
        width: 100px !important;
      }
    }
  }
}

.publicOAO {
  display: flex;
  margin-top: 20px;

  :deep(.el-table__header) {
    width: 100% !important;

    thead {
      tr>th {
        background: #cddaee !important;
        color: #171717;
      }
    }
  }

  :deep(.el-table__body) {
    width: 100% !important;

    tbody {
      tr {
        background: #f6f8fb;
      }

      .cell {
        padding: 0 !important;
        text-align: center;
      }
    }
  }
}

.report {
  margin-top: 20px;

  .reportInput {
    &>div {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      font-size: 14px;

      &>div:first-child {
        width: 25%;
      }

      &>div:last-child {
        width: 75%;
      }

      .el-textarea {
        height: 100px;

        :deep(.el-textarea__inner) {
          height: 100%;
          resize: none;
        }
      }
    }
  }
}

.cardRight {
  padding: 20px 20px 0;

  .relevant {
    border-bottom: 1px dashed #a8a7a7;
    padding: 20px 0;

    .energyItem {
      font-size: 12px;
      display: flex;
      flex-wrap: wrap;

      &>div:nth-child(2) {
        margin-left: 15px;
      }

      div {
        padding: 20px 82px 0 0;
      }

      span {
        margin-left: 10px;
      }

      input {
        width: 50px;
        border: 1px solid #d8d8d8;
        padding: 1px 3px;
        border-radius: 4px;
        margin: 0 5px;
      }
    }

    .energyItem1 {
      font-size: 12px;
      display: flex;
      flex-wrap: wrap;

      &>div:nth-child(2) {
        margin-left: 15px;
      }

      div {
        padding: 20px 100px 0 0;
      }

      span {
        margin-left: 10px;
      }

      input {
        width: 50px;
        border: 1px solid #d8d8d8;
        padding: 1px 3px;
        border-radius: 4px;
        margin: 0 5px;
      }
    }
  }
}

.company {
  border-bottom: 1px dashed #a8a7a7;
  padding: 20px 0;

  .companyItem {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &>div {
      margin-top: 0 !important;
    }

    div {
      margin-top: 15px;
    }

    span {
      padding: 0 10px 0 20px;
    }

    input {
      width: 50px;
      border: 1px solid #d8d8d8;
      padding: 1px 3px;
      border-radius: 4px;
      margin: 0 5px;
    }
  }
}

.comfort {
  border-bottom: 1px dashed #a8a7a7;
  padding: 20px 0;

  .temperature {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;

    &>div {
      display: flex;

      .temperTitle {
        margin-right: 15px;
      }

      span {
        font-weight: 600;
        color: #e6e7e7;
      }
    }

    input {
      width: 70px;
      border: 1px solid #d8d8d8;
      padding: 1px 3px;
      border-radius: 4px;
      margin: 0 5px;

      &::placeholder {
        color: #d8d8d8;
      }
    }
  }
}

.economics {
  border-bottom: 1px dashed #a8a7a7;
  padding: 20px 0;

  .rate {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-top: 15px;

    &>div:last-child {
      margin-left: 40px;
    }
  }
}

.ESG {
  border-bottom: 1px dashed #a8a7a7;
  padding: 20px 0;

  .ESGinput {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;

    &>div:last-child {
      display: flex;
      justify-content: space-between;

      .el-input {
        width: 150px;
        margin-right: 20px;
      }
    }
  }

  .ESGTitle {
    margin-right: 10px;
  }
}

.keyEquip {
  padding: 20px 0;

  .keyTable {
    margin-top: 20px;
  }
}
</style>
